<template>
  <div class="ele-body">
    <a-card :border="false">
      <a-form
        :label-col="{ md: { span: 5 }, sm: { span: 4 }, xs: { span: 24 } }"
        :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
      >
        <a-row :gutter="24">
          <a-col :md="24" :sm="24" :xs="24">
            <!-- <a-form-item label="公司logo" v-bind="validateInfos.logo">
              <a-upload
                name="attachment"
                v-model:file-list="images"
                :action="uploadUrl"
                :limit="1"
                list-type="picture-card"
                @change="uploadHandler"
                :show-upload-list="false"
              >
                <img
                  v-if="imageUrl"
                  :src="imageUrl"
                  style="width: 100%"
                  alt="example"
                />
                <div v-else>
                  <loading-outlined v-if="loading" />
                  <plus-outlined v-else />
                  <div class="ant-upload-text">公司logo</div>
                </div>
              </a-upload>
            </a-form-item> -->
            <a-form-item label="公司名称" v-bind="validateInfos.name">
              <a-input
                allow-clear
                placeholder="请输入公司名称"
                v-model:value="form.name"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item label="公司简称" v-bind="validateInfos.short_name">
              <a-input
                allow-clear
                placeholder="请输入公司简称"
                v-model:value="form.short_name"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item label="所在地区">
              <a-cascader
                :fieldNames="fieldNames"
                placeholder="请选择所在地区"
                :options="options"
                v-model:value="defaultValue"
                @change="changeRegion"
              />
            </a-form-item>
            <a-form-item label="详细地址">
              <a-input
                allow-clear
                placeholder="请输入详细地址"
                v-model:value="form.address"
                autocomplete="new-password"
              />
            </a-form-item>
            <a-form-item label="营业执照">
              <a-upload
                name="attachment"
                v-model:file-list="images2"
                :action="uploadUrl"
                :limit="1"
                list-type="picture-card"
                @change="uploadHandler2"
                :show-upload-list="false"
              >
                <img
                  v-if="imageUrl2"
                  :src="imageUrl2"
                  style="width: 100%"
                  alt="example"
                />
                <div v-else>
                  <loading-outlined v-if="loading" />
                  <plus-outlined v-else />
                  <div class="ant-upload-text">营业执照</div>
                </div>
              </a-upload>
            </a-form-item>
            <a-form-item label="公司电话" v-bind="validateInfos.phone">
              <a-input
                allow-clear
                placeholder="请输入公司电话"
                v-model:value="form.phone"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item label="联系人">
              <a-input
                allow-clear
                placeholder="请输入联系人"
                v-model:value="form.contact"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item label="联系人手机号">
              <a-input
                allow-clear
                placeholder="请输入联系人手机号"
                v-model:value="form.mobile"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item label="微信">
              <a-input
                allow-clear
                placeholder="请输入微信"
                v-model:value="form.wechat"
                autocomplete="off"
                @blur="
                  validate('wechat', { trigger: 'change' }).catch(() => {})
                "
              />
            </a-form-item>
            <!-- <a-form-item label="QQ" v-bind="validateInfos.qq"
              ><a-input
                allow-clear
                placeholder="请输入QQ"
                v-model:value="form.qq"
                autocomplete="off"
            /></a-form-item> -->

            <a-form-item label="邮箱">
              <a-input
                allow-clear
                placeholder="请输入邮箱"
                v-model:value="form.email"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item label="公众号">
              <a-input
                allow-clear
                placeholder="请输入公众号"
                v-model:value="form.official"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item label="银行账号">
              <a-input
                allow-clear
                placeholder="请输入银行账号"
                v-model:value="form.account"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item label="开户行">
              <a-input
                allow-clear
                placeholder="请输入开户行"
                v-model:value="form.account_bank"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item label="开户名">
              <a-input
                allow-clear
                placeholder="请输入开户名"
                v-model:value="form.account_holder"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item label="公司简介" v-bind="validateInfos.introduction">
              <a-textarea
                allow-clear
                placeholder="请输入公司简介"
                v-model:value="form.introduction"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item :wrapper-col="{ md: { offset: 6 } }">
              <a-button type="primary" :loading="loading" @click="save">{{
                loading ? '保存中..' : '保存更改'
              }}</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  import { Form, message } from 'ant-design-vue';
  import { phoneReg } from 'ele-admin-pro';
  import { uploadUrl } from '@/config/setting';
  import { get_address } from '@/api/tenant/store';
  import { detail, edit } from '@/api/tenant/detail';
  const loading = ref(false);
  const useForm = Form.useForm;

  const imageUrl = ref('');
  const imageUrl2 = ref('');

  const options = ref([]);
  const defaultValue = ref(null);

  onMounted(() => {
    get_address().then((res) => {
      options.value = res;
    });
    detail().then((res) => {
      Object.keys(form).forEach((key) => {
        form[key] = res ? res[key] : '';
      });
      defaultValue.value = res.region_name;
      imageUrl.value = res.logo_path;
      imageUrl2.value = res.business_license_path;
      //console.log('form:', form);
    });
  });
  // 地址选择下拉框更改label、balue
  const fieldNames = ref({
    label: 'label',
    value: 'value'
  });
  // 头像上传
  const images = ref([]);
  // 营业执照上传
  const images2 = ref([]);
  /* 完全自己控制选择文件后的处理 */
  const uploadHandler = (info) => {
    if (info && info.file && info.file.response) {
      const data = info.file.response.data;
      imageUrl.value = data.path;
      form.logo = data.id.toString();
    }
  };
  const uploadHandler2 = (info) => {
    if (info && info.file && info.file.response) {
      const data = info.file.response.data;
      imageUrl2.value = data.path;
      form.business_license = data.id.toString();
    }
  };

  const changeRegion = (e) => {
    console.log('地区改变：', e);
    form.region = e[e.length - 1];
  };

  // 表单数据
  const form = reactive({
    name: '',
    short_name: '',
    region: '',
    address: '',
    business_license: '',
    phone: '',
    contact: '',
    mobile: '',
    wechat: '',
    email: '',
    official: '',
    account: '',
    account_bank: '',
    account_holder: '',
    introduction: ''
  });
  // 表单验证规则
  const rules = reactive({
    name: [
      {
        required: true,
        message: '请输入公司名称',
        type: 'string',
        trigger: 'change'
      }
    ],
    short_name: [
      {
        required: true,
        message: '请输入公司简称',
        type: 'string',
        trigger: 'change'
      }
    ],
    phone: [
      {
        required: true,
        message: '请输入公司电话',
        type: 'string',
        trigger: 'change'
      }
    ]
  });

  const { validate, validateInfos } = useForm(form, rules);

  /* 保存编辑 */
  const save = () => {
    validate()
      .then(() => {
        edit(form)
          .then((res) => {
            message.success(res.msg);
          })
          .catch((e) => {
            message.error(e);
          });
      })
      .catch(() => {});
  };
</script>
